import React, { FC, useEffect } from 'react';
import { Modal, Form} from 'antd';
import { ProList } from '@ant-design/pro-components';
import { PersonAccountFlowItem, queryBriefList } from '@/services/person/accountFlow';

interface FinanceProps {
  visible: boolean;
  accountId: number;
  onCancel: () => void;
}

const DetailList: FC<FinanceProps> = (props) => {
  const [form] = Form.useForm();
  const { visible, accountId, onCancel } = props;

  useEffect(() => {
    if (form && !visible) {
      form.resetFields();
    }
  }, [props.accountId]);

  const modalFooter = { okText: '关闭', onOk: onCancel, onCancel };

  const renderContent = () => {
    return (
      <>
        <ProList<PersonAccountFlowItem>
          search={{
            filterType: 'light',
          }}
          rowKey="accountId"
          request={(params) => queryBriefList({ ...params, accountId: accountId })}
          pagination={{
            pageSize: 8,
          }}
          metas={{
            title: {
              dataIndex: 'brief',
              search: false,
            },
            description: {
              dataIndex: 'bizDesc',
              search: false,
            },
            flowType: {
              title: '类型',
              valueType: 'select',
              valueEnum: {
                IN: {
                  text: '借',
                  status: 'Fail',
                },
                OUT: {
                  text: '贷',
                  status: 'Success',
                }               
              },
            },
          }}
        />
      </>
    );
  };

  return (
    <Modal
      title={'账户流水明细'}
      width={640}
      destroyOnClose
      open={visible}
      {...modalFooter}
    >

      {renderContent()}
    </Modal>
  );
};

export default DetailList;